<template>
	<view>
		<x-scroll :fixed="true" :isNav="true" @onRefresh="onRefresh" @scrolltolower="scrolltolower" :refresh="true">
			<view v-if="Array.isArray(list) && list.length">
				<view class="listbox" v-for="(item, index) in list" :key="item.ID" @click="ran_to_add_ball(`/pages/user/user_visitor?id=${item.UserID}`)">
					<view class="imgbox">
						<image class="courtimg" :src="item.PhotoUrl" mode="aspectFill"></image>
						<view v-if="item.Level == '教练'"  class="coachbox">
								<text class="autext">教练</text>
							
						</view>
						<view v-if="item.Level == '星助教'"  class="assbox">
								<text class="astext">星助教</text>
								
						</view>
					</view>

					<view class="contentbox">
						<view class="shopName">{{ item.TrueName }}</view>
						<view class="textbox">
							简介：{{item.Resume || '--'}}
						</view>
						<view class="time">联系电话：{{item.Phone || '--'}}</view>
					</view>
				</view>				
			</view>
			<view class="null" v-else>
				暂无教练
			</view>
		</x-scroll>
	</view>
</template>
<script>
export default {
	data() {
		return {
			index: 1,
			size: 10,
			list: [],
			isMore:true,
		};
	},
	onLoad() {
		this.getcourtlist();
	},
	methods: {
		async getcourtlist() {
			let res = await this.$api.post('/Technicians/PageList', {
				PageIndex: this.index,
				PageSize: this.size,
				TrueName: ''
			});
			this.isMore = Array.isArray(res.data) && res.data.length >= this.size;
			this.list = this.list.concat(res.data);
		},
		//滚动到底部触发
		async scrolltolower() {
			if(this.isMore){
				this.index++;
				this.getcourtlist();
			}
		},
		//下拉刷新
		onRefresh() {
			this.index = 1;
			this.list = []
			this.getcourtlist();
		},
	}
};
</script>
<style lang="scss">
page{
	background-color: #F6F6F6;
}
.null{
	width: 100%;
	height: 50vh;
	display: flex;
	align-items: center;
	justify-content: center;
}
.listbox {
	width: 95%;
	min-height: 260rpx;
	margin: 20rpx auto;
	display: flex;
	background-color: #fff;
	padding: 20rpx 20rpx;
	box-sizing: border-box;
	border-radius: 24rpx;
	.imgbox {
		width: 35%;
		height: 100%;
		text-align: center;
		position: relative;
		.courtimg {
			width: 210rpx;
			height: 210rpx;
			margin-right: 20rpx;
			border-radius: 16rpx;
			vertical-align: middle;
		}
		.coachbox{
			width: 80rpx;
			height: 40rpx;
			border-radius: 16rpx 0 20rpx 0;
			position: absolute;
			top: 0;
			left: 0;
			background: linear-gradient(90deg, #EFD9A4 0%, #B98B51 100%);
			text-align: center;
			line-height: 40rpx;
			.autext{
				font-size: 20rpx;
				color: #140E03;
			}
		}
		.assbox{
			width: 100rpx;
			height: 40rpx;
			position: absolute;
			top: 0;
			left: 0;
			background: linear-gradient(90deg, #E176E2 0%, #D57FF0 100%);
			text-align: center;
			line-height: 40rpx;
			.astext{
				font-size: 20rpx;
				color: #fff;
			}
		}
	}

	.contentbox {
		width: 55%;
		height: 100%;
		margin-top: 6rpx;
		.shopName {
			width: 80%;
			color: #333333;
			font-size: 32rpx;
			margin-bottom: 10rpx;
			white-space: nowrap;
			overflow: hidden;
			text-overflow: ellipsis;
		}
		.textbox{
			display: -webkit-box; /* 使用弹性伸缩盒子模型显示 */
			-webkit-box-orient: vertical; /* 设置排列方式为垂直 */
			-webkit-line-clamp: 3; /* 设置显示的行数，这里为3行 */
			overflow: hidden; /* 隐藏超出部分 */
			text-overflow: ellipsis; /* 用省略号代替被裁剪的文本 */
			word-wrap: break-word; /* 防止内容溢出容器 */
			white-space: normal; /* 正常处理空白符和换行符 */
			font-size: 24rpx;
			color: #999999;
		}
		.time {
			font-size: 24rpx;
			color: #999999;
			margin: 10rpx 0;
		}
		.addressbox {
			width: 100%;
			display: flex;
			justify-content: space-between;
			.address {
				width: 80%;
				font-size: 26rpx;
				color: #a5a5a5;
				white-space: nowrap;
				overflow: hidden;
				text-overflow: ellipsis;
			}
			.move {
				font-size: 26rpx;
				color: #a5a5a5;
			}
		}
	}
}
</style>
